import {Button, View, WebView} from "@tarojs/components"
import {observer} from "mobx-react"
import Taro, {useDidHide, useDidShow, useLoad, useRouter} from "@tarojs/taro"
import {NotHaveDevCard, SimpleListDevCard, SingleDevCard} from "@/components/devCard"
import MyNav from "@/components/nav"
import {imagesUrl} from "@/utils/baseUrl"
import SearchBar from "@/components/searchBar"
import {useContext, useEffect} from "react"
import homeStore from "./model"
import appStore from "@/store/app"
import {getStorage} from "@/utils/localstoreage"
import scanStore from "@/store/scan"
import {toLogin} from "@/utils/pageRedirect"

const Home = () => {
	const router = useRouter()
	const {
		getDevListShowType,
		changeDevListShowType,
		devListLoading,
		devList,
		devSwiperChange,
		devSwiperCurrent,
		simpleDevInfo,
		currentDevInfo,
		updateListDataByType
	} = useContext(homeStore)

	const {handleScan} = useContext(scanStore)

	const {isLogin, userInfo} = useContext(appStore)

	function updatePageDataSource() {
		updateListDataByType({
			isLogin,
			userId: userInfo.userId
		})
	}

	useEffect(() => {
		// console.log(router.params, "router")
		// if (router.params.devGId) {
		// 	handleScan()
		// }
		console.log("home useEffect [userInfo.userId, getDevListShowType]")
		updatePageDataSource()
	}, [userInfo.userId, getDevListShowType])

	useEffect(() => {
		console.log("home useEffect [userInfo.userCompany]")

		if (userInfo.userCompany) Taro.setNavigationBarTitle({title: userInfo.userCompany})
	}, [userInfo])

	useLoad(() => {})

	// 对应 onShow
	useDidShow(async () => {
		console.log("Home useDidShow")
		updatePageDataSource()
	})

	// 对应 onHide
	useDidHide(() => {
		console.log("Home useDidHide")
	})

	return (
		<View
			className="w-screen h-screen bg-x_bg relative flex flex-col"
			style={{
				backgroundImage: `url(${imagesUrl + "device-bg.png"})`,
				backgroundSize: "100% 58%",
				backgroundRepeat: "no-repeat"
			}}
		>
			{/* 自定义头部栏 */}
			<MyNav color="white" showBack={false}>
				{getStorage("userCompany") || "恒蓝云"}
			</MyNav>

			{/* <OfficialAccount></OfficialAccount> */}

			{/* 搜索栏 */}
			<SearchBar
				isLogin={isLogin}
				iconClick={() => (isLogin ? handleScan() : toLogin())}
			></SearchBar>

			{/* 设备卡片区域 */}
			{isLogin ? (
				getDevListShowType === "single" ? (
					devList ? (
						<SingleDevCard
							loading={devListLoading}
							devList={devList || []}
							swiperCurrent={devSwiperCurrent}
							swiperCurrentData={currentDevInfo?.devDetailDataList || undefined}
							devSwiperChange={devSwiperChange}
							changeDevListShowType={changeDevListShowType}
						></SingleDevCard>
					) : (
						<NotHaveDevCard></NotHaveDevCard>
					)
				) : getDevListShowType === "simpleList" ? (
					simpleDevInfo ? (
						<SimpleListDevCard
							loading={devListLoading}
							simpleDevInfo={simpleDevInfo || undefined}
							changeDevListShowType={changeDevListShowType}
						></SimpleListDevCard>
					) : (
						<NotHaveDevCard></NotHaveDevCard>
					)
				) : null
			) : null}
		</View>
	)
}

export default observer(Home)
